<template>
    <view class="wrapper overbox">
        <view class="box inner overbox-check">
            <view class="comment_content">
                <view class="align-center h2 mt10px">💬 COMMENT</view>
                <view v-if="comment_inputs_show">
                    <uni-forms :rules="rules" :value="user_comment" ref="baseForm" label-position="top">
                        <uni-forms-item name="name" label="姓名" required>
                            <input class="uni-input" v-model="user_comment.name" placeholder="请叫我..."/>
                        </uni-forms-item>
                        <uni-forms-item name="email" label="邮箱" required>
                            <input class="uni-input" v-model="user_comment.email" placeholder="请输入邮箱"/>
                        </uni-forms-item>
                        <uni-forms-item name="content" label="评论" required>
                            <textarea v-model="user_comment.content" placeholder="请填写正确的邮箱，以便于更好的与您取得联系，否则您的留言可能会被删除！"/>
                        </uni-forms-item>
                    </uni-forms>
                </view>
                <view v-else>
                    <uni-forms :rules="rules" :value="user_comment" ref="baseForm" label-position="top">
                        <view><strong>Hi！{{ user_comment.name }}</strong></view>
                        <uni-forms-item name="content" ref="message" label="评论" required>
                            <textarea v-model="user_comment.content" placeholder="请填写正确的邮箱，以便于更好的与您取得联系，否则您的留言可能会被删除！"/>
                        </uni-forms-item>
                    </uni-forms>

                </view>
                <view class="tip">🦄 支持Makedown语法</view>
                <view class="actions align-center">
                    <button class="comment-button" :disabled="disabled" @click="comment">发送评论</button>
                </view>

            </view>
            <view class="m-cmmt">
                <view class="cmmts">
                    <view class="comment_item" v-for="item in comment_list" :id="`rp_`+item.id">
                        <view class="head">
                            <image class="avatar" :src="item.user_avatar" mode="scaleToFill"/>
                        </view>
                        <view class="cntwrap">
                            <view class="rp_content">
                                <view class="cnt f-brk">
                                    <view class="rp_name">
                                        <text>{{ item.user_name }}</text>
                                        <view class="re-nameplate" v-html="item.nameplate"></view>
                                    </view>
                                </view>
                                <mp-html class="cn" selectable lazy-load :content="item.user_comment"/>
                            </view>
                            <view class="rp_config">
                                <div class="rp_config-text">
                                    <view class="time s-fc4 pointer" :title="item.date_create_time">
                                        {{ item.create_time }}
                                    </view>
                                    <view @click="rpClick(item.id)" v-if="item.id!==current">回复</view>
                                    <view @click="rpClick(item.id,false)" v-else>收起</view>
                                </div>
                                <view :class="{show:item.id===current}" class="editor_hidden text mb-10">
                                     <textarea
                                         class="rp_editor"
                                         :placeholder="`回复` + item.user_name + `....`"
                                         v-model="rp_content"></textarea>

                                    <view class="rp_msg mt10px msg_color rp-btn-error-msg">
                                        <text class="rp_error-msg" v-if="rp_msg.f_rp_msg">{{ rp_msg.f_rp_msg }}</text>
                                        <text v-else></text>
                                        <button class="rp_btn" @click="Send(item.id,id,rp_content,item.user_name,false)">发送</button>
                                    </view>
                                </view>
                                <view class="clear"></view>
                            </view>
                            <view class="sub_rp_content" v-if="item.reply.length">
                                <view class="rp_sub" v-for="vo in item.reply" :id="`sub_rp_`+vo.id">
                                    <view class="reply_name">{{ vo.reply_name }}
                                        <text class="rp_sub-margin">回复</text>
                                        <text class="uName">{{ vo.uName }}：</text>
                                    </view>

                                    <rich-text class="sub_rp_content_item" :nodes="vo.content"></rich-text>
                                    <view class="rp_time-box">
                                        <view class="rp_time">{{ vo.create_time }}</view>
                                        <view v-if="vo.id!==sub_current" @click="sub_rpClick(vo.id)" class="s-fc3">
                                            回复
                                        </view>
                                        <view v-else @click="sub_rpClick(vo.id,false)" class="s-fc3">收起</view>
                                    </view>
                                    <view :class="{show:vo.id===sub_current}" class="editor_hidden text"><textarea
                                        class="rp_editor"
                                        :placeholder="`回复` + vo.reply_name + `....`"
                                        v-model="sub_rp_content"></textarea>
                                        <view class="rp_msg msg_color mt10px rp-btn-error-msg">
                                            <text class="rp_error-msg" v-if="rp_msg.s_rp_msg">{{ rp_msg.s_rp_msg }}</text>
                                            <text v-else></text>
                                            <button class="rp_btn" @click="Send(item.id,id,sub_rp_content,vo.reply_name,true)">发送</button>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>

<script>
import {addComment, addReply} from "@/api";
import {throttle} from "@/utils"
export default {
    data() {
        return {
            rules: {
                // 对name字段进行必填验证
                name: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入姓名',
                    },
                        {
                            minLength: 3,
                            maxLength: 5,
                            errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
                        }
                    ]
                },
                // 对email字段进行必填验证
                email: {
                    rules: [{
                        required: true,
                        format: 'email',
                        errorMessage: '请输入正确的邮箱地址',
                    }]
                },
                content: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入内容',
                    }]
                },
            },
            current: null,
            cid: null,
            id: null,
            sub_current: null,
            sub_Id: null,
            rp_content: "",
            sub_rp_content: "",
            send_status: {
                f_send: true, //发送按钮
                s_send: true
            },
            user_name: "",
            msg: "",
            rp_msg: {
                f_rp_msg: "",
                s_rp_msg: ""
            },
            user_comment: {
                name: "",
                email: "",
                content: ""
            },
            reply_data: {
                reply_name_by_session: "",
                reply_email_by_session: ""
            },
            disabled: false
        };
    },
    props: {
        comment_list: {type: Array, default: []}, //评论列表
        comment_inputs_show: {type: Boolean, default: true} // 有localStorage就隐藏姓名和邮箱的输入框
    },
    watch: {
        rp_content: function (data) {
            data ? (this.send_status.f_send = false) : this.send_status.f_send;
        },
        sub_rp_content: function (data) {
            data ? (this.send_status.s_send = false) : this.send_status.s_send;
        }
    },
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        this.cid = option.cid
        this.id = option.id
    },
    mounted() {
        if (!uni.getStorageSync("reply_data")) return
        let reply_data = JSON.parse(uni.getStorageSync("reply_data"));
        //输入框处于隐藏状态并且填写了评论信息
        if (reply_data) {
            this.user_comment.name = this.reply_data.reply_name_by_session =
                reply_data.reply_name_by_session;
            this.user_comment.email = this.reply_data.reply_email_by_session =
                reply_data.reply_email_by_session;
        }
    },
    methods: {
        /**
         * 评论
         */
        comment() {
            this.$refs['baseForm'].validate((err, formData) => {
                if (!err) {
                    this.disabled = true;
                    const p = {
                        content: this.user_comment.content,
                        name: this.user_comment.name,
                        email: this.user_comment.email,
                    }
                    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
                    let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
                    // cid是栏目ID，aid是文章ID
                    if (curRoute === '/pages/about/index') {
                        p.cid = this.id
                    } else {
                        p.aid = this.id;
                        p.cid = this.cid
                    }
                    addComment(p).then(res => {
                        if (res.status) {
                            this.user_comment.content = "";
                            uni.setStorageSync(
                                "reply_data",
                                JSON.stringify(res.reply_data)
                            );
                            this.$emit("refresh_comment", this.id);
                            setTimeout(() => {
                                this.disabled = false;
                            }, 800)
                        } else {
                            // this.$refs.message.focus()
                            this.disabled = false;
                        }
                        this.msg = res.msg;
                    })
                }
            })

        },
        /**
         * @param mid 评论id，只取父级的
         * @param aid 文章id
         * @param content 内容
         * @param uName 被回复的人
         * @param is_sub 是不是评论的子级(没有头像的那一级)
         * @constructor
         */
        Send:throttle(function(mid, aid, content, uName, is_sub) {
            let reply_name_by_session = this.reply_data
                ? this.reply_data.reply_name_by_session
                : "";
            let reply_email_by_session = this.reply_data
                ? this.reply_data.reply_email_by_session
                : "";
            this.send_status.f_send = true;
            this.send_status.s_send = true;
            const p = {
                content: content,
                uName: uName,
                mid: mid,
                aid: aid,
                cid: this.cid,
                reply_email_by_session: reply_email_by_session,
                reply_name_by_session: reply_name_by_session
            }
            addReply(p)
                .then(res => {
                    // 回复成功后清除内容
                    if (res.status) {
                        if (!is_sub) {
                            this.rp_msg.f_rp_msg = res.msg;
                            this.rp_content = "";
                        } else {
                            this.rp_msg.s_rp_msg = res.msg;
                            this.sub_rp_content = "";
                        }
                        if (is_sub) {
                            setTimeout(() => {
                                this.send_status.s_send = false;
                            }, 800)
                        } else {
                            setTimeout(() => {
                                this.send_status.f_send = false;
                            }, 800)
                        }
                        this.$emit("refresh_comment", aid);
                    } else {
                        if (is_sub) {
                            this.send_status.s_send = false;
                        } else {
                            this.send_status.f_send = false;
                        }
                    }
                    is_sub
                        ? (this.rp_msg.s_rp_msg = res.msg)
                        : (this.rp_msg.f_rp_msg = res.msg);
                });
        }),
        rpClick(index, open = true) {
            this.rp_msg.f_rp_msg = "";
            this.current = open ? index : null; //是否展开
        },
        sub_rpClick(key, open = true) {
            this.rp_msg.s_rp_msg = "";
            this.sub_current = open ? key : null; //是否展开
        }
    },
}
</script>

<style lang="scss" scoped>
::v-deep .uni-textarea-textarea {
    width: 100%;
}
.comment-textarea .uni-easyinput__content-textarea {
    border: none;
    height: auto;
    background: transparent;
}

.uni-input {
    border: 1px solid rgba(144, 144, 144, 0.25);
    background: rgba(144, 144, 144, 0.075);
    height: 40px;
    border-radius: 5px;
}

.comment-button {
    width: 80%;
    background: linear-gradient(155deg, #08aeea, #b721ff, #3369e7, #2af598) 0/400% 400%;
    color: #fff;
    font-size: 16px;
}

.tip {
    text-align: right;
    color: #08aeea;
    font-size: 12px;
    margin-bottom: 5px;
}

.comment_content {
    padding: 1rem 3rem 3rem 3rem;
}

::v-deep .comment_ordinary {
    color: #fff !important;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 5px;
}

::v-deep .comment_ordinary_user {
    background-color: #2d2d2d;
}

::v-deep .comment_ordinary_user_friend {
    background-color: #08AEEA;
    background-image: -webkit-linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
    background-image: -moz-linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
    background-image: -o-linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
    background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}

::v-deep .comment_ordinary_user_admin {
    background-color: #FFE53B;
    background-image: -webkit-linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
    background-image: -moz-linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
    background-image: -o-linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
    background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
}

.re-nameplate {
    margin-left: 7px;
}

.overbox {
    background-color: #fff;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: relative;
}

.overbox:before {
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.overbox-check {
    position: relative;
    z-index: 2;
}

.m-cmmt {
    padding: 3rem;
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto;
}

.m-cmmt a {
    text-decoration: none;
}

.m-cmmt .cmmts .comment_item {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 55px;
    border-top: 1px dotted #ccc;
}

.m-cmmt .head {
    width: 15%;
}

.m-cmmt .head .avatar {
    border-radius: 50%;
    width: 2.667rem;
    height: 2.667rem;
}
.rp-btn-error-msg {
    display: flex;
    justify-content: space-between;
}
.rp_config-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-bottom: 1rem;
}
.mb-10 {
    margin-bottom: 0.756rem;;
}

.m-cmmt .cmmts .cntwrap {
    width: 85%;
}

.m-cmmt .cmmts .cntwrap .f-brk, .m-cmmt .cmmts .cnt.f-brk {
    word-break: break-word;
    margin-bottom: 10px;
}

.m-cmmt .cmmts .cnt {
    width: 100%;
    overflow: hidden;
    line-height: 20px;
}

.f-brk {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.m-cmmt .cmmts .cntwrap .rp_name {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 1.083rem;
}

.cn {
    font-size: 15px;
    color: #505050;
}

p.cn {
    margin: 0;
}

.s-fc4, a.s-fc4:hover {
    font-size: 12px;
    color: #999;
}

.m-cmmt .cmmts .rp_config {
    margin-top: 15px;
    text-align: right;
}

.m-cmmt .cmmts .re {
    text-align: right;
}

.m-cmmt .cmmts .re .s-fc3 {
    color: #8a93a0;
    user-select: none;
}

.m-cmmt .cmmts .re .s-fc3 span {
    margin-left: 6px;
}

.m-cmmt .cmmts .time {
    float: left;
    margin: 0 !important;
}

.rp_time-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.rp_sub-margin {
    margin: 0 7px;
}

.sub_rp_content_item {
    margin: 7px 0;
    display: inline-block;
    color: #505050;
    font-size: 14px;
}

.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
}

.clearfix {
    zoom: 1;
}

.rp_sub .rp_time {
    font-size: 12px;
    color: #999;
}

.rp_sub .rp_time a {
    color: #8a93a0;
}

.rp_sub .rp_time a:hover {
    color: #027fff;
}

.rp_sub .rp_time a span {
    margin-left: 6px;
}

.text {
    margin-top: .756rem;
}

.cntwrap .sub_rp_content {
    margin: 1rem 0;
    padding: .5rem;
    background-color: #fafbfc;
    border-radius: 3px;
}

.cntwrap div.sub_rp_content {
    padding: 0;
}

.cntwrap div.sub_rp_content .rp_sub {
    margin: 0 .765rem;
    padding: 15px 0 30px 0;
    font-size: 1.083rem;
    color: #17181a;
    clear: both;
}

.select {
    font-size: 14px;
}
.rp_btn {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    border: none;
    border-radius: 2px;
    background-color: #0093E9;
    background-image: -webkit-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    background-image: -moz-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    background-image: -o-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    color: #fff;
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    font-size: 12px;
    width: 38px;
    opacity: 1;
    margin: 0;
}
.rp_error-msg {
    color: #FF2525;
    font-size: 14px;
}
.rp_btn:hover {
    opacity: 0.8;
}

.editor_hidden {
    display: none;
}

.rp_editor {
    position: relative;
    text-align: left;
    padding: .6rem 1rem;
    font-size: 1.083rem;
    line-height: 1.7;
    color: #17181a;
    outline: none;
    min-height: 1.3em;
    background-color: #f1f1f1;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

.show {
    display: block !important;
}

.mb1rem {
    margin-bottom: 1rem;
}

.mt1rem {
    margin-top: 1rem;
}

.mt10px {
    margin-top: 10px;
}

.pointer {
    cursor: pointer;
}

.m-cmmt {
    padding: 3rem 10px;
}

.comment_content {
    padding: 0;
}

@media (prefers-color-scheme: dark) {
    .overbox {
        background-color: #fff;
    }
}

</style>
